<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>酒店点评页面</title>
    <link rel="stylesheet" href="./static/css/reviews.css" />
</head>

<body>

    <div class="header">
        <h1 id="hotelName">酒店名称</h1>
    </div>

    <!-- 入住体验点评 -->
    <div class="rating-section">
        <h2>入住体验点评</h2>
        <div>
            <label>设施</label>
            <div class="stars-group" data-rating="0">
                <span class="stars">★</span>
                <span class="stars">★</span>
                <span class="stars">★</span>
                <span class="stars">★</span>
                <span class="stars">★</span>
                <span class="rating-score">0</span> <!-- 显示评分 -->
            </div>
        </div>
        <div>
            <label>服务</label>
            <div class="stars-group" data-rating="0">
                <span class="stars">★</span>
                <span class="stars">★</span>
                <span class="stars">★</span>
                <span class="stars">★</span>
                <span class="stars">★</span>
                <span class="rating-score">0</span> <!-- 显示评分 -->
            </div>
        </div>
        <div>
            <label>卫生</label>
            <div class="stars-group" data-rating="0">
                <span class="stars">★</span>
                <span class="stars">★</span>
                <span class="stars">★</span>
                <span class="stars">★</span>
                <span class="stars">★</span>
                <span class="rating-score">0</span> <!-- 显示评分 -->
            </div>
        </div>
        <div>
            <label>位置</label>
            <div class="stars-group" data-rating="0">
                <span class="stars">★</span>
                <span class="stars">★</span>
                <span class="stars">★</span>
                <span class="stars">★</span>
                <span class="stars">★</span>
                <span class="rating-score">0</span> <!-- 显示评分 -->
            </div>
        </div>
        <div>
            <label>餐饮</label>
            <div class="stars-group" data-rating="0">
                <span class="stars">★</span>
                <span class="stars">★</span>
                <span class="stars">★</span>
                <span class="stars">★</span>
                <span class="stars">★</span>
                <span class="rating-score">0</span> <!-- 显示评分 -->
            </div>
        </div>
    </div>

    <!-- 总评分显示 -->
    <div class="total-rating">
        总评分：<span id="totalRating">0</span> / 5
    </div>

    <!-- 出行身份 -->
    <div class="identity-section">
        <h2>出行身份</h2>
        <div class="identity-buttons">
            <button>商务出差</button>
            <button>家庭亲子</button>
            <button>情侣出行</button>
            <button>朋友团体</button>
            <button>独自出行</button>
            <button>其他类型</button>
        </div>
    </div>

    <!-- 评价输入框和图片上传 -->
    <div class="comment-section">
        <h2>评价</h2>
        <textarea id="commentText" rows="4" maxlength="100" placeholder="分享您对‘酒店设施、服务、周边环境’的评价吧" required></textarea>
        <p class="char-count" id="charCount">0/100</p>
        <p class="error" id="commentError" style="display: none;">评价内容不能为空</p>

        <h2>上传图片（最多3张）</h2>
        <button class="customBtn" type="button" id="customUploadBtn">选择图片</button>
        <input type="file" id="fileUploadImages" name="fileUpload[]" multiple accept="image/*">
        <input type="hidden" name="assessImg" id="assessImg">
        <div class="image-preview" id="imagePreview"></div>
    </div>

    <!-- 提交按钮 -->
    <div>
        <button class="submit-button" id="access_btn">提交点评</button>
    </div>
    <script src="./static/js/jquery-1.8.2.min.js"></script>
    <script src="./static/js/reviews.js"></script>
</body>

</html>